<template>

	<div class="login-page" :style="{backgroundImage:'url('+require('../../../static/imags/bg.png')+')'}">
		<div class="login-img" :style="{backgroundImage:'url('+require('../../../static/imags/login_logo.png')+')'}"></div>
		<div class="login-content">
			<div style="height: 1rem;line-height:1rem;font-size: 20px;font-weight: bold;padding-left: 40px;margin-bottom: 0.5rem;">登录/LOGIN</div>
			<el-form :model="user" status-icon :rules="rules2" ref="user" label-width="1.5rem" class="demo-ruleForm">
				<el-form-item label="账号" prop="userCode">
					<el-input type="text" v-model="user.userCode" placeholder="登录账号" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="user.password" placeholder="请输入密码" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="roleId">
					<el-select v-model="user.roleId"  placeholder="请选择登录角色">
						<el-option v-for="item in roles" :key="item.roleId" :label="item.roleName" :value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="checked">记住密码</el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('user')" style="width: 100%;margin-top: 0.5rem;">登 录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

</template>
<style>
	@import url("login.css");
	@import url("../../common/common.css");
</style>
<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入账号'));
				} else {
					if(this.user.password !== '') {
						this.$refs.user.validateField('password');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				checked: false,
				user: {
					userCode: '',
					password: '',
					roleId:''
				},
				rules2: {
					userCode: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				},
				roles: []
			}
		},
		created(){
			this.getRoleList();
		},
		methods: {
			submitForm(formName) {
				var _self = this;
				this.$refs[formName].validate((valid) => {

					if(valid) {
						_self.utils.ajaxJSON({
							url: 'user/login',
							type: "POST",
							data:_self.user,
							success: function(res) {
								if(res.status == 200) {
									_self.utils.setJsonObject('user', res.user);
									_self.$router.replace('./main/welcome');
								}
								if(res.status == 300) {
									_self.$message({
										message: res.msg,
										type: 'error'
									})
								}
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getRoleList: function() {
				var _self = this;
				_self.utils.ajaxJSON({
					type: 'POST',
					url: 'role/loginAll',
					data: {},
					success: function(res) {
					  console.log(res);
						if(res.status == 200) {
							_self.roles = res.dataList;
						}
					}
				})
			}
		}
	}
</script>
